<template>
    <div class="paysuccess_b" :style="{height:docHeight}">
        <div class="paysuccess_bg">
            <img src="../assets/pay_02.png" alt="">
        </div>
        <div class="header_pensonal">
            <img src="../assets/man.png" alt="" @click="goto()">
        </div>
        <div class="paysuccess_box">
            <div class="paysuccess" v-show="type == 'ok'">
                <img src="../assets/pay_01.png" alt="" >
                <div class="paysuccess_title mbottom323">支付成功</div>
                <!-- <div class="paysuccess_discount">8.8<span>折</span></div>
                <div class="paysuccess_plus">PLUS折扣</div> -->
            </div>
            <div class="paysuccess" v-show="type == 'fail'">
                <img src="../assets/pay_03.png" alt="" >
                <div class="paysuccess_title mbottom323">支付失败</div>
            </div>
            <!-- <div class="paysuccess_info">
                <p>会员：2020223555588</p>
                时间：2020-03-30  14:29
            </div> -->
        </div>
        <div class="paysuccess_bottom">
            期待再会
            <p>CAR PLUS</p>
        </div>
        <v-footer :member="status" @judge="goback()"></v-footer>
    </div>
</template>
<script>
import footer from '@/components/common/footer'
    export default {
        components: {
            'v-footer': footer
        },
        data () {
            return {
                docHeight: '',
                type:'',
                status:2
            }
        },
        created(){
            this.type = this.$route.query.type
        },
        mounted () {
            let that = this;
            that.docHeight = document.documentElement.clientHeight + 'px'
        },
        methods: {
            goback(){
                let that = this
                this.$router.push({
                    path:'/'
                })
            },
            goto(){
                let that = this
                this.$router.push({
                    path:'/my'
                })
            }
        }
    }
</script>
<style scoped>
.paysuccess_b{
    background: #000;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.paysuccess_bg{
    position: absolute;
    left: 58px;
    top: 62px;
}
.paysuccess_bg img{
    width: 710px;
    height: 164px;
}
.header_pensonal{
    text-align: right;
    padding: 54px 48px 52px 0;
}
.header_pensonal img{
    width: 74px;
    height: 74px;
}
.paysuccess_box{
    padding: 0px 56px;
    background: #000;
}
.paysuccess{
    background: #fff;
    text-align: center;
    padding-top: 118px;
}
.paysuccess img{
    width: 215px;
    height: 215px;
}
.paysuccess_title{
    font-size: 79px;
    color: #231815;
    line-height: 79px;
    padding-top: 36px;
}
.paysuccess_discount{
    color: #22CFB6;
    font-size: 150px;
    height: 150px;
    margin: 100px 0 20px 0;
}
.paysuccess_discount span{
    font-size: 79px;
}
.paysuccess_plus{
    font-size: 53px;
    line-height: 53px;
    color: #000;
    padding-bottom: 86px;
}
.paysuccess_nav{
    background: #000;
    width: 100%;
    height: 5px;
}
.paysuccess_info{
    margin-top: 5px;
    background: #fff;
    font-size: 40px;
    color: #231815;
    line-height: 40px;
    padding: 36px 70px;
}
.paysuccess_info p{
    margin-bottom: 18px;
}
.paysuccess_bottom{
    font-size: 62px;
    color: #fff;
    text-align: center;
    line-height: 62px;
    padding-top: 54px;
}
.paysuccess_bottom p{
    margin-top: 32px;
}
.mbottom323{
    padding-bottom: 115px;
}
</style>